
<template>
    <div  class="totalStyle contractinfo_box">
        <div class="tablestyle">
            <div class="titleStyle">
                <p class="leftTitle dis_center">
                    <el-icon  class="callback" :size = '20' @click="callback"><Back /></el-icon>
                    <span class="callback ml-16" @click="callback">返回</span>
                    <span class="split"></span>
                    <span class="font_w">{{dialogData.props.title}}</span>
                    </p>
            </div>
            <div class="bottomBox bg_color">
                <div class="test_paper">
                <el-form
                        class="formStyle"
                        :model="dialogData.formData"
                        :inline="true"
                        label-width="160px"
                        :rules="dialogData.rules"
                        ref="addform"
                        require-asterisk-position="left"
                        size="default"
                        scroll-to-error="true"
                    >
                        <div class="basicstyle">
                            <div class="itemStyle pb-16">
                                <p class="headerMsg">职业健康</p>
                                <div class="formItem">
                                    <p class="titleName">基本信息</p>
                                    <el-form-item  label="组织架构：" prop="deptId" required>
                                        <el-tree-select
                                                placeholder="请选择组织架构"
                                                v-model="dialogData.formData.deptId"
                                                :data="dialogData.dropdown.treedata"
                                                :props = "{
                                                    children:'children',
                                                    label:'departmentName'
                                                }"
                                                node-key = 'id'
                                                show-checkbox
                                                check-strictly
                                                check-on-click-node
                                                :render-after-expand="false"
                                                :default-expanded-keys="defaultExpandedKeys"
                                                default-expand-all
                                                @node-click="getobjIdList"
                                            />
                                    </el-form-item>
                                    <el-form-item  label="姓名：" prop="userId" required>
                                        <el-select
                                            v-model="dialogData.formData.userId"
                                            placeholder="请选择人员姓名"
                                            clearable
                                            filterable
                                            @change="getUserInfo"
                                        >
                                            <el-option v-for="item in dialogData.dropdown.person" :key="item.id" :label="item.realName" :value="item.id" required>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="手机号：" >
                                        <el-input
                                            placeholder="请输入手机号"
                                            disabled
                                            v-model="dialogData.formData.phone"
                                            maxlength="50"
                                        />
                                    </el-form-item>
                                     <!-- <el-form-item  label="部门："  >
                                        <el-input
                                            placeholder="请输入部门"
                                            disabled
                                            v-model="dialogData.formData.deptName"
                                        />
                                    </el-form-item> -->
                                    <el-form-item  label="职位：" >
                                        <el-input
                                            placeholder="请输入职位"
                                            maxlength="50"
                                            v-model="dialogData.formData.position"
                                        />
                                    </el-form-item>
                                    <el-form-item label="人员照片："  >
                                        <el-upload
                                                    v-model:file-list="dialogData.formData.photo"
                                                    action="api/common/uploadFile"
                                                    list-type="picture-card"
                                                    :limit="1"
                                                    :beforeUpload="beforeAvatarUpload"          
                                                    :on-exceed="handleExceedCover"
                                                    :on-success="uploadSucceed_"
                                                    :on-change = 'imghandleChange'
                                                    :on-preview="handlePictureCardPreview"
                                                >
                                                    <el-icon><Plus /></el-icon>
                                                    <template #tip>
                                                        <div class="el-upload__tip">
                                                            只能上传jpg/png格式,且不超过10MB,只能上传1张
                                                        </div>
                                                    </template>
                                                </el-upload>
                                                <el-dialog v-model="dialogVisible">
                                                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
                                                </el-dialog>
                                    </el-form-item>
                                    <el-form-item  label="身份证号："  prop="idCard" required>
                                        <el-input
                                            placeholder="请输入身份证号"
                                            v-model="dialogData.formData.idCard"
                                            maxlength="50"
                                        />
                                    </el-form-item>
                                    <el-form-item  label="户籍："  prop="censusRegister" required>
                                        <el-input
                                            placeholder="请输入户籍"
                                            maxlength="50"
                                            v-model="dialogData.formData.censusRegister"
                                        />
                                    </el-form-item>
                                    <el-form-item  label="区内住址：" >
                                        <el-input
                                        maxlength="50"
                                            placeholder="请输入区内住址（具体到门牌号）"
                                            v-model="dialogData.formData.areaAddress"
                                        />    
                                    </el-form-item>
                                    <el-form-item  label="宿舍住址：" >
                                        <el-input
                                        maxlength="50"
                                            placeholder="请输入宿舍住址（具体到门牌号）"
                                            v-model="dialogData.formData.dormAddress"
                                        />    
                                    </el-form-item>
                                    <el-form-item  label="网络员：">
                                        <el-select
                                            v-model="dialogData.formData.webmasterId"
                                            placeholder="请选择网络员"
                                            clearable
                                            filterable
                                        >
                                            <el-option v-for="item in dialogData.dropdown.person" :key="item.id" :label="item.realName" :value="item.id" required>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>

                                    
                                    <p class="titleName">人员证书</p>
                                    <div class="usercertBox" v-for="(item,index) in dialogData.formData.userCertificates" :key="index">
                                        <el-form-item label="证书名称："
                                                :prop="'userCertificates.' + index + '.name'"
                                                :rules="[{required: true, message: '证书名称不能为空', trigger: 'blur'}]"
                                                >
                                            <el-input
                                                placeholder="请输入证书名称"
                                                v-model="item.name"
                                                maxlength="50"
                                            />
                                        </el-form-item>
                                        <el-form-item label="证书编号："
                                                :prop="'userCertificates.' + index + '.code'"
                                                :rules="[{required: true, message: '证书编号不能为空', trigger: 'blur'}]"
                                                >
                                            <el-input
                                                placeholder="请输入证书编号"
                                                maxlength="50"
                                                v-model="item.code"
                                            />
                                        </el-form-item>
                                        <el-form-item  label="有效期限："  
                                                :prop="'userCertificates.' + index + '.remark'"
                                                :rules="[{required: true, message: '有效期限不能为空', trigger: 'blur'}]"
                                                >
                                            <el-date-picker
                                                    v-model="item.remark"
                                                    type="date"
                                                    placeholder="请选择有效期限"
                                                />
                                        </el-form-item>
                                        <el-form-item label="证书图片："  >
                                            <el-upload
                                                        v-model:file-list="item.url"
                                                        action="api/common/uploadFile"
                                                        list-type="picture-card"
                                                        :limit="1"
                                                        :beforeUpload="beforeAvatarUpload"          
                                                        :on-exceed="handleExceedCover"
                                                        :on-success="uploadSucceed_"
                                                        :on-change = 'imghandleChange'
                                                        :on-preview="handlePictureCardPreview"
                                                    >
                                                        <el-icon><Plus /></el-icon>
                                                        <template #tip>
                                                            <div class="el-upload__tip">
                                                                只能上传jpg/png格式,且不超过10MB,只能上传1张
                                                            </div>
                                                        </template>
                                                    </el-upload>
                                                    <el-dialog v-model="dialogVisible">
                                                        <img w-full :src="dialogImageUrl" alt="Preview Image" />
                                                    </el-dialog>
                                        </el-form-item>
                                        <el-form-item  label="对应特殊作业："
                                             :prop="'userCertificates.' + index + '.specialworkId'"
                                             :rules="[{required: true, message: '请选择对应特殊作业', trigger: 'blur'}]"
                                            >
                                            <el-select
                                                v-model="item.specialworkId"
                                                placeholder="请选择对应特殊作业"
                                                clearable
                                                filterable
                                                multiple
                                            >
                                                <el-option v-for="item in dialogData.dropdown.jobName" :key="item.key" :label="item.value" :value="item.key" required>
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-button  @click="deluserCertificates(index)" class="ml-160" type="danger" plain>删除</el-button>
                                    </div>
                                    <el-button @click="adduserCertificates" class="ml-160" type="primary" plain>增加</el-button>

                                <!-- <div class="formItem"> -->
                                     <p class="titleName">体检信息</p>
                                    <el-form-item label="上传附件：" >
                                        <el-upload
                                            v-model:file-list="dialogData.uploadFile.filedata"
                                            class="upload-demo"
                                            action="api/common/uploadFile"
                                            drag
                                            :on-preview="handlePreview"
                                            :on-remove="handleRemove"
                                            :before-remove="beforeRemove"
                                            :on-exceed="handleExceed"
                                            :before-upload="filebeforeUpload"
                                            :on-success="uploadSuccess"
                                            :on-change = 'filehandleChange'
                                            accept=".pdf,.docx,.xlsx,.mp4,.jpg,.jpeg,.png"
                                        >
                                            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                                            <div class="el-upload__text">
                                                将文件拖至此处, 或<em>点击上传</em>
                                            </div>
                                            <template #tip>
                                            <div class="el-upload__tip">
                                                可上传word（docx）、 excel（xlsx）、pdf（ppt转成pdf后可以上传）大小不超过100MB；图片(jpg、jpeg、png）大小不超过10MB；视频（mp4），大小不超过500MB；
                                            </div>
                                            </template>
                                        </el-upload>
                                    </el-form-item>
                                    <el-table
                                        :data="dialogData.formData.userChecks"
                                        :header-cell-style="{ background: 'rgba(242,245,250,1)'}"     
                                        border
                                        style="width: 100%"
                                    > 
                                        <el-table-column prop="name"   label="文件名" min-width="10%" >
                                            <template #default="scope">
                                                <span class="textcolor" @click="handleLook( scope.row)">{{scope.row.name}}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="time"   label="上传时间" min-width="10%" />
                                        <!-- <el-table-column prop="fileSize"   label="文档大小" min-width="10%" /> -->
                                        <el-table-column prop="fileTypeStr"   label="文档格式" min-width="10%" />
                                        <el-table-column label="操作列" width="150" min-width="28%">
                                            <template #default="scope">
                                                <!-- <span class="buttonFun cursor" @click="handleLook( scope.row)">预览</span>
                                                <span class="buttonFun cursor" @click="download(scope.row)">下载</span> -->
                                                <el-popconfirm 
                                                        width="520"
                                                        confirm-button-text="确定"
                                                        cancel-button-text="取消"
                                                        @confirm="handleDelete(scope.$index, scope.row)"
                                                        title="你确定要删除这条数据吗?">
                                                        <template #reference>
                                                        <span class="buttonFun cursor">删除</span>
                                                        </template>
                                                </el-popconfirm>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                <!-- </div> -->
                                </div> 
                            </div>
                            <div class="itemStyle mt-16 footerStyle ">
                                <el-button
                                    size="large"
                                    type="primary"
                                    v-if="dialogData.props.title !== '查看'"
                                    class="btn-mixins dia-suc"
                                    @click="success(addform)"> &nbsp;&nbsp;确定 &nbsp;&nbsp;</el-button>
                                <el-button
                                    size="large"
                                    class="btn-mixins-clear-default"
                                    @click="callback()"
                                    >&nbsp;&nbsp; 取消 &nbsp;&nbsp;</el-button>
                            </div>
                        </div>
                </el-form>
                </div>
            </div>
            <previewBox :previewDialog="dialogData.previewDialog" :file="dialogData.formData.file"
                @closePreview="closePreview()">
            </previewBox>
        </div>
    </div>
</template>
<script  setup>
import previewBox from '../../preview/preview.vue'
import { defineProps, ref,defineEmits,onBeforeMount } from "vue";
import { reactive, watch,onUpdated } from "vue";
// import {getEquipmentInfo as getEquipmentInfo, operateEquipmententer as operateEquipmententer} from "@/api/device.js"
import {getUserList as getUserList, getOccupationalInfo as getOccupationalInfo, operateOccupational as operateOccupational} from "@/api/train.js"
import { ElMessage, ElMessageBox,ElNotification } from "element-plus";
import { useRouter } from 'vue-router';
import { getymd,getymdhms,handleExceedCover } from '@/utils/auth'
import {getDeptTree as getDeptTree, getUserData as getUserData} from "@/api/user";
import { getJobNoNames as getJobNoNames } from "@/api/secure.js"
const router = useRouter();
const addform = ref('');
const fileform = ref('');
let dialogImageUrl = ref('')
const dialogVisible = ref(false)
const user = JSON.parse(localStorage.getItem('userData')) 
let props = defineProps({
  tableId:{
      type: String,
  },
  title: {
      type: String
  },
  companyList:{
      type:[]
  },
}); 
const cascaderprops = {
  multiple: true,
}
const emit = defineEmits(['callback'])
const dialogData = reactive({
    dropdown:{
        organizeList:[{}],//应急组织列表
        schemeList:[{ }],//关联应急预案
        parentContractNoList:[{ //关联隐患
            label:'1',
            value:'1'
         }],
        person:[{}]
    },
    rules:{
        userId:[{ required: true, message: "请选择人员姓名", trigger: "change" }],
        phone:[{ required: true,pattern: '[^ \x20]+', message: "请输入手机号", trigger: "blur" }],
        deptName:[{ required: true,pattern: '[^ \x20]+', message: "请输入部门", trigger: "blur" }],
        idCard:[{ required: true,pattern: '[^ \x20]+', message: "请输入身份证号", trigger: "blur" }],
        censusRegister:[{ required: true,pattern: '[^ \x20]+', message: "请输入户籍", trigger: "blur" }],
        deptId:[{ required: true, message: "请选择组织架构", trigger: "change" }],
    },
    props:{
        title:'',
    },
    uploadFile:{
        rules:{},
        dialogFormVisible:false,
        formLabelWidth:'800px',
        filedata:[]
    },
    formData:{
        userCertificates:[
            {
                url:[]
            }
        ],
        userChecks:[],
        file: {}
        // tableData:[
        //     {
        //         name:'',
        //         size:'',
        //         time:'',
        //         type: ''
        //     }
        // ]
    },
    previewDialog: false
    // fileData:{
    //     dialogFormVisible:false,
    //     formData:{},
    //     rules:{

    //     }
    // }
})
/**
 * 图片上传大小校验
 */
const beforeAvatarUpload = (file)=>{
  const testmsg = /^image\/(png|jpg|jpeg)$/.test(file.type)
  if (!testmsg) {
    ElMessage.error('上传格式不正确,只支持JPG/PNG!')
    return false
  } else if (file.size && file.size / 1024/1024 > 10) {
    ElMessage.error('上传大小不正确,大小不超过10Mb!')
    return false
  }
}
/**
 * 附件上传大小校验
 */
const filehandleChange = (file, fileList) => {
  //1、判断文件大小是否合法，文件限制不能大于100M（文件）
  const isLt5M = file.size / 1024 / 1024 < 100;
  const ispng = file.size / 1024 / 1024 < 10;
  const ismp4 = file.size / 1024 / 1024 < 500;
  const typename = file.name.split('.')[1]
  if(typename == "jpeg"|| typename == "png"||typename == "jpg") {
      if (!ispng) {
            ElMessage({
                type: 'error',
                message: '上传图片大小不能超过 10MB!',
            })
            fileList.splice(-1,1) //移除当前超出大小的文件
                return false; 
      }
  }else if (typename == "xlsx"||typename == "docx"||typename == "pdf") {
      if (!isLt5M) {
            ElMessage({
                type: 'error',
                message: '上传文件大小不能超过 100MB!',
            })
            fileList.splice(-1,1) //移除当前超出大小的文件
                return false; 
      }
  }else if (typename == "mp4") {
      if (!ismp4) {
            ElMessage({
                type: 'error',
                message: '上传视频大小不能超过 500MB!',
            })
            fileList.splice(-1,1) //移除当前超出大小的文件
                return false; 
      }
  }
    // 2、限制重复上传
  // 将fileList去重后的长度如果小于目前数组的长度，说明有重复
    const newListLength = new Set(fileList.map(item=>item.name)).size;
	const listLength = fileList.length;
	if(listLength > newListLength) {
    ElMessage({
        type: 'error',
        message: '上传文件重复!',
    })
    fileList.splice(-1, 1) //移除当前重复的文件即末尾对象
		return false;
	}
}
/**
 * 上传视频校验
 */
const videoBeforeUpload = (file)=>{
// 	const self = this
//     const isLt30MB  = file.size / 1024 / 1024 < 30;
//     const isSize = new Promise(function(resolve, reject) {
//       let _URL = window.URL || window.webkitURL;
//       let url = URL.createObjectURL(file);
//       let videoElement = document.createElement('video')
//       // 当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件。 元数据包括：时长、尺寸（仅视频）以及文本轨道。
//       videoElement.addEventListener("loadedmetadata", function (_event) {
//         let width = videoElement.videoWidth
//         let height = videoElement.videoHeight
//         let duration = videoElement.duration; // 视频时长
//         if(!isLt30MB) return operatTip('error','上传视频大小不能超过30MB！')
//         if(Math.floor(duration) >= 30) return operatTip('error','上传视频时长不能超过 30S！')
//         let valid = `${width}*${height}` === '1280*720'
//         valid ? resolve() : reject();
//       })
//       videoElement.src = _URL.createObjectURL(file)
//     }).then(() => {
//        return file;
//     },() => {
//       operatTip('error','上传视频尺寸为 1280*720！')
//       return Promise.reject();
//    });
//    return isSize ;
}
const filebeforeUpload = (file) =>{
    // ".pdf,.docx,.doc,.xls,.xlsx,.ppt,.mp4,.pptx"
        const typeExtensions= ['pdf', 'docx','xlsx','mp4','png','jpg','jpeg']; // 可以自定义需要支持的音频格式
        const fileExtension = file.name.split('.').pop().toLowerCase(); // 根据文件名获取文件扩展名并转换为小写字母形式
        if (typeExtensions.includes(fileExtension) == false) {
            ElMessage({
                type: 'error',
                message: '只能上传word（docx）、 excel（xlsx）、pdf（ppt转成pdf后可以上传），图片(jpg、jpeg、png）和MP4格式的文件',
            })
        }
        return typeExtensions.includes(fileExtension);
      }
//查看详情
const getOccupationalInfoFun =()=>{
        getOccupationalInfo(props.tableId).then((res) => {
        if(res.code ===200){
            dialogData.formData = res.body;
            // dialogData.formData.photo = dialogData.formData.photo?dialogData.formData.photo.split(''):[]
            dialogData.formData.photo =  dialogData.formData.photo&&dialogData.formData.photo[0]&&dialogData.formData.photo[0].url?dialogData.formData.photo:[]
             responsiblePersonIdListFun(dialogData.formData.deptId)
            if(dialogData.formData.userCertificates&& dialogData.formData.userCertificates.length&&dialogData.formData.userCertificates.length>0){
                dialogData.formData.userCertificates.forEach((item,index)=>{
                    let urlList = []
                    let obj ={}
                    if(item.url){
                        
                        let obj ={}
                        obj.url = item.url
                        urlList.push(obj)
                        
                    }
                    item.url = urlList
                    console.log(item.url)
                })
            }
        }else{
            ElNotification({
                title: '提示',
                message: res.message?res.message:'服务器异常',
                type: 'warning',
            })
            if(res.code === 100007 ||  res.code === 100008 ||  res.code === 100011){
                    store.dispatch('app/logout')
                }
        }
    })
}

//人员列表
const getUser = ()=>{
  getUserList().then((res) => {
    console.log(res)
    if(res.code === 200){
      dialogData.dropdown.person = res.body;
    }else {
      ElNotification({
        title: '警告',
        message: res.message?res.message:'服务器异常',
        type: 'warning',
      })
      if(res.code === 100007 ||  res.code === 100008){
        store.dispatch('app/logout')
      }
    }
  })
}
const getDeptTreeFun = () => {
    let id = JSON.parse(localStorage.getItem('userData')).userId;
    getDeptTree(id).then((res) => {
            if(res.code == 200){
              dialogData.dropdown.treedata = res.body;
            }else {
              ElNotification({
                title: '警告',
                message: res.message?res.message:'服务器异常',
                type: 'warning',
              })
              if(res.code === 100007 ||  res.code === 100008){
                store.dispatch('app/logout')
              }
            }
          });
}
const responsiblePersonIdListFun = (id) => {
    getUserData(id).then((res)=>{
            if(res.code ===200){
               dialogData.dropdown.person = res.body
            }else{
                ElNotification({
                title: '警告',
                message: res.message?res.message:'服务器异常',
                type: 'warning',
                })
                if(res.message.indexOf('token已过期')>-1  ){
                store.dispatch('app/logout')
                }
            }
        })
}
//获取八大作业
const getJobNoNamesFun = ()=>{
    getJobNoNames().then((res)=>{
        if(res.code ===200){
               dialogData.dropdown.jobName = res.body
            }else{
                ElNotification({
                title: '警告',
                message: res.message?res.message:'服务器异常',
                type: 'warning',
                })
                if(res.message.indexOf('token已过期')>-1  ){
                store.dispatch('app/logout')
                }
            }
    })
}
onBeforeMount(()=>{
    getJobNoNamesFun()
    getDeptTreeFun()
})
watch(
  () => props,
  () => {
      dialogData.props.title = props.title;
      dialogData.dropdown.accidentTypeList = props.accidentTypeList
      if(dialogData.props.title === '编辑'){
          getOccupationalInfoFun()
          
      }else{
        //   dialogData.formData.equipmentFiles = []
        //   dialogData.formData.equipmentUrlList =[]
        //   dialogData.formData = {
        //     }
      }
  },
  { deep: true, immediate: true }
);
const getUserInfo = (val) => {
    let index = dialogData.dropdown.person.findIndex((res)=>{return res.id == val})
    if(index>-1){
        dialogData.formData.phone = dialogData.dropdown.person[index].phone;
        // dialogData.formData.deptId = dialogData.dropdown.person[index].deptId;
        // dialogData.formData.deptName = dialogData.dropdown.person[index].deptName;
    }
}
const getobjIdList = (val) => {
        dialogData.dropdown.person= []
        dialogData.formData.userId = []
        if(val){
                responsiblePersonIdListFun(val.id)
        }
}
const handlePictureCardPreview = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url?uploadFile.url:''
    dialogVisible.value = true
}
const analysisProxy = (value) => {
    return JSON.parse(JSON.stringify(value))
}

// 附件上传之后获取处理数据
const handleExceed =(file)=>{
    console.log(file)
}
// 提交附件
const uploadSuccess = (uploadFile)=>{
    // if (!fileform) return;
    // fileform.validate(async (valid) => {
        // if (valid) {
            console.log(uploadFile)
            let fileData = JSON.parse(JSON.stringify(dialogData.uploadFile.filedata ))
            if(fileData&&fileData.length&&fileData.length>0){
                fileData.forEach((file,index)=>{
                    let obj = {
                        name:file.name.substring(0,file.name.lastIndexOf('.')),
                        time:getymdhms(new Date()),
                        fileSize:file.size / 1024 / 1024+'MB',
                        fileTypeStr:file.name.substring(file.name.lastIndexOf('.'),file.name.length),
                        url:file.response.body
                    }
                    dialogData.formData.userChecks.push(obj)
                })
            }
            dialogData.uploadFile.filedata = []
        // }
    // })
}

//预览
const handleLook = (row) => {
  dialogData.previewDialog = true
  dialogData.formData.file = row
}
const closePreview =() => {
  dialogData.previewDialog = false
}

//下载
const download = (row)=>{
    window.open(row.url);
}

//删除
const handleDelete = (index,row)=>{
    dialogData.formData.userChecks.splice(index, 1)
}
//添加人员证书
const adduserCertificates = ()=>{
    let obj = {
        name:"",
        code:'',
        remark:'',
        urlList:[],
        specialworkId:''
    }
    dialogData.formData.userCertificates.push(obj)
}
//删除人员证书
const deluserCertificates = (index)=>{
    dialogData.formData.userCertificates.splice(index, 1)
}
/**
 * 表单提交
 */
const success = (addform) => {
  if (!addform) return;
  addform.validate(async (valid) => {
    if (valid) {
            let obj = JSON.parse(JSON.stringify(dialogData.formData));
            if(obj.userCertificates&& obj.userCertificates.length&&obj.userCertificates.length>0){
                obj.userCertificates.forEach((item,index)=>{
                    let url = ''
                    if(item.url){
                        item.url = item.url[0]? item.url[0].response?item.url[0].response.body:item.url[0].url : '';
                    }
                    item.remark = item.remark?getymd(item.remark):''
                })
            }
            if(obj.photo&&obj.photo.length>0){
                let url = obj.photo[0].response?obj.photo[0].response.body:obj.photo[0].url;
                obj.photo[0].url = url;
            }
            let user = JSON.parse(localStorage.getItem('userData'))
            obj.createUser = user.realName;
            operateOccupational(obj).then((res)=>{
                if(res.code ===200){
                    callback()
                }else{
                    ElNotification({
                        title: '提示',
                        message: res.message?res.message:'服务器异常',
                        type: 'warning',
                    })
                    if(res.code === 100007 ||  res.code === 100008 ||  res.code === 100011){
                            store.dispatch('app/logout')
                        }
                }
            })
            } else {
                return false;
            }
  });
};
// 增加资料
const addfile = ()=>{
    dialogData.uploadFile.dialogFormVisible = true;
}
//关闭添加资料弹框
const fileclose = () => {
    dialogData.uploadFile.dialogFormVisible = false;
}
//返回上一级
const callback = () => {
    emit('callback') 
}
</script>
<style lang = 'less' scoped>
.contractinfo_box{
      img{
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
    :deep(.el-form--inline .el-form-item){
        width: 100%;
    }
    :deep(.el-radio){
        margin-right: 16px;
    }
    :deep(.el-form-item--default .el-form-item__content){
        width: calc(100% - 160px);
    }
    :deep(.el-select){
        width: 100%;
    }
    :deep(.department_box .el-input){
        width: 250px;
    }
    :deep(.el-input){
        width: 100%;
    }
    :deep(.upload-demo){
        width: 100%;
    }
    :deep(.el-cascader){
        width: 100%;
    }
    :deep(.delete_color){
        color: #F46B5A;
    }
    .delete_icon{
        margin-top: -18px;
        margin-right: 16px;
    }
    .bg_color{
    background-color: #EDF0F5;
    }
    .bottomBox{
        // height: 100%;
        overflow-y: auto;
    }
    .test_paper{
        width: 1070px;
        margin: 0 auto;
        .formStyle{
            width: 100%;
        }
    }
    .totalStyle{
        height: 100%;
    }
    .department{
        background-color: #F2F5FA;
        padding-top: 16px;
        margin-bottom: 16px;
    }
    .departmentProject{
        background-color: #F2F5FA;
        padding-top: 16px;
        margin-bottom: 16px;
        :deep(.el-input){
                 width: 80%;
            }
    }
    .addpart{
        margin-left: 160px;
    }
    .callback{
        cursor: pointer;
    }
    .itemStyle{
        background-color: #ffffff;
        .headerMsg{
            height: 56px;
            line-height: 56px;
            color: #1C222C;
            font-size: 16px;
            border-bottom: 1px solid #DADFE6;
            padding: 0 16px;
            width: 100%;
            font-weight: 600;
        }
        .formItem{
            padding: 16px 56px 0;
            .titleName{
                color: #4B515B;
                font-size: 14px;
                padding-left: 8px;
                border-left: 5px solid #2E83FC;
                margin-bottom: 16px;
                font-weight: 600;
            }
        }

        .tishi{
            margin-bottom: 16px;
            color: #F46B5A;
            font-size: 12px;
        }

    }
    .workCard{
        :deep(.el-select){
            width: 90%;
        }
    }
    .addOptions{
    margin-left: 160px;
    margin-bottom: 16px;
    .leftTitle{
        display: flex;
        align-content: center;
    }
}
.footerStyle{
    line-height: 76px;
    display: flex;
    line-height: 76px;
    align-items: center;
    justify-content: center;
    height: 76px;
}
.split{
    width: 1px;
    height: 20px;
    background-color: #DADFE6;
    margin: 0 16px;
}
.priviewImg{
    width: 100%;
    height: 100%;
    background-size: cover;
}
.changeTemplateBox{
    padding: 0 56px 16px 160px;
    .templatebox{
        width: 180px;
        height: 54px;
        background-color: #EDF0F5;
        border-radius: 4px;
        align-content: center;
         display: inline-flex;
         margin-bottom: 16px;
        .head_image{
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background-color: #2E83FC;
            color: #ffffff;
            margin: 8px;
            line-height: 38px;
            text-align: center;
        }
        .msg_info{
            .jobType{
                color: #797F89;
                font-size: 12px;
                margin: 8px 0 4px 0;
            }
            .realname{
                color: #1C222C;
                font-size: 14px;
            }
        }
    }
    .mrl{
        margin: 0 16px;
        line-height: 54px;
        color: #A9AFB9;
    }
}
    :deep(.el-dialog__header) {
      border-bottom: 1px solid #cccccc;
      padding: 16px;
      margin-right: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }


      :deep(.el-dialog__body) {
    padding: 16px 50px 16px 16px;
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  :deep(.el-dialog__header) {
    border-bottom: 1px solid #cccccc;
    margin-right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
  }
  :deep(.el-dialog__title) {
    color: #1C222C;
    font-size: 20px;
    width: 100px;
  }
:deep(.el-dialog__headerbtn ){
            position: static;
            top: 0px;
            right: 0;
            padding: 0;
            width: auto;
            height: auto;
          }
.usercertBox{
    background-color: #F2F5FA;
    padding: 8px 0;
    margin-bottom: 8px;
}
  
}


</style>